<template>
  <div @click="pathPush" v-if="detailitem" style="cursor: pointer;">
      <div class="detailItem">
          <div class="imgparent">
               <img :src=  "baseUrl+detailitem.iurl"  alt=""  style="width:100%;height:100%;">
              <div class="bottom">
                  <div  class="click"><i class="el-icon-video-play"></i><span>{{detailitem.click}}</span></div>
              </div>

              
          </div>
          <span class="title">{{detailitem.title}}</span>
         
      </div>
  </div>
</template>

<script>

import { mapGetters } from "vuex";

export default {
    
    props:['detailitem'],
    data() {
    return {
    
    };
  },
  computed: {
    ...mapGetters(["baseUrl"]),
  },
    methods:{
      async  pathPush() {

        if(this.detailitem.status == 0 || this.detailitem.status == 3) {
            this.$emit("changeView",this.detailitem);
            return ;
        }

          await this.$http.get("/videos/click/" + this.detailitem.id)
            if(this.$route.path != `/vedio/${this.detailitem.vid}`) {
                let routeInfo = this.$router.resolve({ path: `/vedio/${this.detailitem.id}`
            ,query:{content:this.detailitem.vid} });
             window.open(routeInfo.href,'_blank')
             
            }
        } ,

         
      
    } ,
    

}
</script>

<style  lang="less" scoped>
.detailItem{

    p{
        font-size: 1vw;
        padding: 0.433vw 0.4vw;
    }

    .title {
           
            font-weight:400 ;
        }
       
    .imgparent{
        position: relative;
        width: 100%;
        height: 20vh;
        overflow: hidden;
        border-radius: 0.7vw;
        img {
            background-size: cover;
            object-fit: cover;
            
        }
         .bottom{
           width: 100%;
           height: 20%;
            position: absolute;
            bottom: 0; 
            color: white;
            background: linear-gradient(to top, rgba(0,0,0,.85) 0%, rgba(0,0,0,.55) 50%, transparent 100%);

          
           
            .click {
                margin-top: 1vh;
                margin-left: 1vw;
            }
        }
        
    }
}

.detailItem:hover {
        .imgparent .bottom {
            display: none !important;
        }
    }

</style>